<template>
    <view :style="{ border:' 1px dashed red' }" >
            <view>123321321321312321--test----{{msg}}</view>
            <view>123321321321312321--test----{{test1}}</view>
            <view>123321321321312321--test----{{msgC}}</view>


            <view>
             子组件：我的子组件的数据 <button @click="childPropMsg">小——》大点击给父组件发送数据</button>
            </view>

    </view>
</template>

<script lang='ts' >

 import { Component, Prop,Vue, Watch ,Emit} from 'vue-property-decorator'


 @Component({     //   @Component  是一个装修器   不可以在下面写语句
        name: 'test',
        //         filters:{
        //     Test(arg: string){
        //       return arg + "  我来刷点存在感"
        //     }
        //   },
        //   directives:{
        //     Test(arg: string){
        //       return arg + "  我来刷点存在感"
        //     }
        //   }
    })


    export default class extends Vue {
// props: ['postTitle'],
 
     @Prop({
            type: String, // 父组件传递给子组件的数据类型
            required: false, // 是否必填
            default: ' ' // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
        }) msg!:string;
     
        
        childMsg:string='自组件的数据'
       
         //test:string=msg
        test1:string='eqweqweqweqw'

        msgC:string='子组件的msgC数据'

   
       
         created() {
           console.log('888123123123123123自组件')
          console.log('999',this)
          console.log('父组件传递的参数:',this.$props.msg)// one
        

          }

          mounted() {
              //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
          }

          @Emit('bindSend')   //@Emit()不传参数,那么它触发的事件名就是它所修饰的函数名.
           send(msgC: string){
               //return 123      //如果没有返回值 那么传递的参数就是参数
           }; 
          



          childPropMsg(){  //方法中获取this
          	    this.msgC = '子组件的msg数据,被传给了父组件';
	            this.send(this.msgC)
          }

          @Watch('$route')
      routechange(to: any, from: any) {
    // if (to.query.name!=from.query.name) {
    // }
      console.log(to)
         }
       

//         // dynamic component
// 51   $refs!: {
// 52     helloComponent: Hello
// 53   }


    }
</script>

<style scoped>

</style>